<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			用户管理
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-user-fill" style="color:#999;font-size:16px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="user-fill"></i-icon> -->
				用户管理
			</view>
		</view>
		<view class="p-table">
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>编号</th>
					<th>登录名</th>
					<th>角色</th>
					<th>管理员密码</th>
					<th>联系方式</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in userList">
					<td>{{item.id}}</td>
					<td>{{item.username}}</td>
					<td>{{item.role}}</td>
					<td>{{item.pass}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.createDatetime}}</td>
					<td class="bz">
						<button @click="editUser(item)" class="r10">
							<i class="ri-pencil-fill" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#FFF" name="pencil-fill"></i-icon> -->
							编辑
						</button>
						<button class="b-dell" @click="delNode(item)">
							<i class="ri-delete-bin-line" style="color:#333;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#333" name="delete-bin-line"></i-icon> -->
							删除
						</button>
					</td>
				</tr>
			</table>
			<view class="bz">
				<Pagination :total="total" :pageSize="size" :nowPage="current" @change="alterCurrent">
				</Pagination>
			</view>
		</view>
		<view v-if="user" class="popup-win">
			<view class="card">
				<view class="">
					<button type="default" @click="user=null">关闭</button>
				</view>
				<view style="padding:0 100rpx;line-height:60rpx;">
					<view>编号：{{user.id}}</view>
					<view>用户名：{{user.username}}</view>
					<view>角色：
						<text>{{user.role}}</text>
					</view>
					<view>手机号：{{user.phone}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let that;
	import Pagination from "@/components/pagination.vue"
	export default {
		components: {
			Pagination
		},
		data() {
			return {
				pages: 0,
				total: 0,
				current: 1,
				size: 5,
				add: false,
				userList: [],
				user: null,
				roles: ['用户', '管理员', '站长'],
			}
		},
		methods: {
			addOne() {
				this.add = true
			},
			alterCurrent: function(c) {
				if (c) {
					if (c <= this.pages && c >= 1) {
						this.current = c;
						this.getUserInfoList()
					}
				}
			},
			getUserInfoList() {
				let _this = this;
				uni.request({
					url: _this.baseURL + '/user/all?current=' + _this.current + '&size=' + _this.size,
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							let DataS = res.data.data
							_this.userList = DataS.records;
							_this.pages = parseInt(DataS.pages)
							_this.total = parseInt(DataS.total)
							_this.current = parseInt(DataS.current)
							_this.size = parseInt(DataS.size)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2500
							})
						}
					},
					fail: (err) => {
						console.warn(err)
						uni.showToast({
							title: err.data.message || err.message,
							icon: 'error',
							duration: 2500
						})
					}
				})
			},
			/**
			 * 编辑用户
			 * @param {Object} user
			 */
			editUser(user) {
				this.user = user
			},
			/**
			 * 修改用户角色
			 * @param {Object} e
			 */
			editRole(e) {
				let role = this.roles[e.detail.value]
				// this.user.role=role;
				if ('站长' == role) {
					uni.showToast({
						title: '请选择站点',
						icon: 'none',
						duration: 3000
					})
				} else {
					uni.showToast({
						title: '功能建设中...',
						icon: 'none',
						duration: 3000
					})
				}
			}
		},
		onLoad() {
			that = this;
			this.getUserInfoList();
		}
	}
</script>
